<template>
	<view class="pt-share">
        <!-- #ifdef APP-PLUS -->
        <u-popup v-model="ptShow" mode="bottom" length="40%" border-radius="20">
            <view class="u-m-30 u-text-center" style="font-weight: 600;">
                分享到
            </view>
            <view class="u-flex u-m-l-30 u-m-r-30 u-m-b-30">
                <view class="u-text-center dis-item" @click="handleShare('weixin')">
                    <view class="dis-icon wechat-icon">
                        <u-icon name="wechat" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">微信好友</view>
                </view>
                <view class="u-text-center dis-item" @click="handleShare('pengyouquan')">
                    <view class="dis-icon pengyouquan-icon">
                        <u-icon name="pengyouquan" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">朋友圈</view>
                </view>
                <view class="u-text-center dis-item" @click="handleShare('qq')">
                    <view class="dis-icon qq-icon">
                        <u-icon name="qq" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">QQ好友</view>
                </view>
                <view class="u-text-center dis-item" @click="handleShare('qzone')">
                    <view class="dis-icon qqkongjian-icon">
                        <u-icon name="qqkongjian" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">QQ空间</view>
                </view>
            </view>
            <view class="u-flex u-m-l-30 u-m-r-30">
                <view class="u-text-center dis-item" @click="handleCopy">
                    <view class="dis-icon fuzhilianjie-icon">
                        <u-icon name="fuzhilianjie" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">复制链接</view>
                </view>
                <view class="u-text-center dis-item" @click="handlePoster">
                    <view class="dis-icon tupian-icon">
                        <u-icon name="tupian" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">生成海报</view>
                </view>
            </view>
        </u-popup>
        <!-- #endif -->
        <!-- #ifdef H5 -->
        <u-popup v-model="ptShow" mode="bottom" length="30%" border-radius="20">
            <view class="u-m-30 u-text-center" style="font-weight: 600;">
                分享到
            </view>
            <view class="u-flex u-row-around u-m-30">
                <view @click="handleCopy">
                    <view class="dis-icon fuzhilianjie-icon">
                        <u-icon name="fuzhilianjie" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">复制链接</view>
                </view>
                <view @click="handlePoster">
                    <view class="dis-icon tupian-icon">
                        <u-icon name="tupian" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">生成海报</view>
                </view>
            </view>
        </u-popup>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <u-popup v-model="ptShow" mode="bottom" length="30%" border-radius="20">
            <view class="u-m-30 u-text-center" style="font-weight: 600;">
                分享到
            </view>
            <view class="u-flex u-m-30">
                <button type="default" open-type="share" :plain="true">
                    <view class="dis-icon wechat-icon">
                        <u-icon name="wechat" custom-prefix="custom-icon" size="50"></u-icon>
                    </view>
                    <view class="">微信好友</view>
                </button>
            </view>
        </u-popup>
        <!-- #endif -->
        <assemble-qrcode-poster
            ref="poster"
            :goodsImg="goods_img"
            :goodsName="goods_name"
            :goodsId="goods_id"
            :price="goods_price"
            :qrcode="minicode"
            :ptParams="ptParams"
            :ptInfo="ptInfo"
        ></assemble-qrcode-poster>
	</view>
</template>

<script>
    import h5Copy from '@/common/junyi-h5-copy.js'
    import assembleQrcodePoster from './-assemble-qrcode-poster.vue'
    import * as API_Distribution from '@/api/distribution.js'
    import { domain } from '@/config/config'
	export default {
		data() {
			return {
                ptShow: false,
                ptParams: '', //拼团参数
                minicode: '' //小程二维码
			};
		},
        props: {
            show: {
                type: Boolean,
                default: false
            },
            goods_id: {
                type: String,
                default: ''
            },
            goods_name: {
                type: String,
                default: ''
            },
            goods_img: {
                type: String,
                default: ''
            },
            goods_price: {
                type: Number,
                default: 0
            },
            ptInfo: {
                type: Object,
                default: {}
            }
        },
        components: {
            assembleQrcodePoster
        },
        watch: {
            show(newVal) {
                this.ptShow = newVal
                this.ptShow && this.getGenerateShortLink()
            },
            ptShow(newVal) {
                this.$emit('close', newVal)
            }
        },
        methods: {
            //拼团参数
            getGenerateShortLink() {
                console.log("getGenerateShortLink:::", this.ptInfo);
                this.ptParams = `?order_sn=${this.ptInfo.order_sn}&goods_id=${this.ptInfo.goods_id}&sku_id=${this.ptInfo.sku_id}&from_nav=assemble`;
            },
            //分享至微信、朋友圈、QQ、QQ空间、微博
            handleShare(type) {
                let that = this
                uni.share({
                    provider: type === 'weixin' || type === 'pengyouquan' ? 'weixin' : (type === 'qq' || type === 'qzone' ? 'qq' : 'sinaweibo'),
                    scene: type === 'weixin' ? 'WXSceneSession' : (type === 'pengyouquan' ? 'WXSenceTimeline' : ''),
                    type: type === 'qq' || type === 'qzone' ? 2 : 0,
                    title: that.goods_name,
                    imageUrl: that.goods_img,
                    href: domain.wap + `/order-module/order/assemble${this.ptParams}`,//这里写打开app的urlschemes
                    summary: `我在${this.site.site_name}发现了一个不错的商品，赶快开看看吧`,
                    success(res) {
                        that.$u.toast('分享成功')
                    },
                    fail(err) {
                        that.$u.toast('分享失败')
                        console.log("fail:" + JSON.stringify(err));
                    },
                    complete(res) {
                        that.ptShow = false
                    }
                })
            },
            //复制链接
            handleCopy() {
                let that = this
                // #ifdef H5
                let content = domain.wap + `/order-module/order/assemble${this.ptParams}`
                // #endif
                // #ifdef APP-PLUS
                let content = domain.wap + `/order-module/order/assemble${this.ptParams}`
                // #endif
                that.ptShow = false
                // #ifdef APP-PLUS
                uni.setClipboardData({
                	data: content,
                	complete() {
                        that.$u.toast('已复制到剪贴板')
                	}
                })
                // #endif
                // #ifdef H5
                const result = h5Copy(content)
                if (result) {
                    that.$u.toast('已复制到剪贴板')
                } else {
                    that.$u.toast('暂不支持复制')
                }
                // #endif
            },
            //生成海报
            handlePoster() {
                this.ptShow = false
                this.$refs.poster.showCanvas()
            }
        }
	}
</script>

<style lang="scss" scoped>
    .dis-item {
        width: 20%;
    }
    button {
        border: none !important;
        font-size: 26rpx !important;
    }
    .dis-icon {
        width: 100rpx;
        height: 100rpx;
        margin: 0 16rpx 16rpx 16rpx;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        &.wechat-icon {
            background: linear-gradient(to right, #6FD680 0%, #99EC72 100%);
        }
        &.pengyouquan-icon {
            background: linear-gradient(to right, #ADDD49 0%, #CCEE58 100%);
        }
        &.qq-icon {
            background: linear-gradient(to right, #75A3F3 0%, #6EC7EF 100%);
        }
        &.qqkongjian-icon {
            background: linear-gradient(to right, #F2AF44 0%, #F6D348 100%);
        }
        &.weibo-icon {
            background: linear-gradient(to right, #EB764D 0%, #EF965A 100%);
        }
        &.poster-icon {
            background: linear-gradient(to right, #ADDD49 0%, #CCEE58 100%);
            color: #FFFFFF !important;
        }
        &.fuzhilianjie-icon, &.tupian-icon {
            color: #000000;
            background-color: #F2F2F2;
            /deep/ {
                .u-icon__icon {
                    font-weight: 600 !important;
                }
            }
        }
    }
</style>
